import React, { Component } from 'react';
import './index.less'
import { NavBar, Toast, Tag, Cell, ProductCard, Input, SubmitBar } from 'react-vant';
import { Ellipsis, WapHomeO, Arrow,Alipay,WechatPay } from '@react-vant/icons'
import WithRouter from '../../router/withRouter'
import { getOrderInfo,createOrder,payOrder } from '../../api/user';
import MyLoading from '../../components/loading';
class ComfirmOrder extends Component {
    state = {
        info: null,
        payList:[
            {
                name:"微信",
                type:"weixin"
            },{
                name:"支付宝",
                type:"alipay"
            }
        ],
        activeIndex:0,
        mark:"",
        preOrderNo:"",
        payHtml:""
    }
    render() {
        let { info,payList,mark,payHtml} = this.state;
        return (
            <div className='order'>
                <NavBar
                    title="确认订单"
                    leftText={<WapHomeO fontSize={20} color='#fff' />}
                    rightText={<Ellipsis fontSize={20} color='#fff' />}
                    onClickLeft={() => {
                        this.props.router.navigate(-1)
                    }}
                    onClickRight={() => Toast('按钮')}
                    fixed
                />
                {
                    info && (
                        <React.Fragment>
                            <div className='header'>
                                <div className='address'>
                                    <div>
                                        <Tag type="primary">收获地址</Tag>
                                    </div>
                                    <div className='addressName'>
                                        <span>{info.realName}</span> <span>{info.phone}</span>
                                    </div>
                                    <div className='addressInfo'>
                                        <span className='default'>[默认]</span><span>{info.province}{info.city}{info.district}{info.detail}</span>
                                    </div>
                                    <div className='right'>
                                        <Arrow color='#919191' fontSize={15} />
                                    </div>
                                </div>
                            </div>
                            <div className='box'>
                                <div className='goodsnum'>
                                    共{info.orderDetailList.length}件商品
                                </div>
                                <div>
                                    {
                                        info.orderDetailList.map((item,index)=>{
                                            return (
                                                <div key={index}>
                                                <ProductCard
                                                    num={item.payNum}
                                                    price={item.price}
                                                    desc={item.sku}
                                                    title={item.productName}
                                                    thumb={item.image}
                                                />
                                            </div>
                                            )
                                        })
                                    }
                                </div>
                            </div>
                            <div className='box'>
                                <Cell title='快递费用' value='免运费' />
                                <Cell title='备注信息' />
                                <Cell style={{ marginTop: 10 }}>
                                    <Input.TextArea placeholder="请添加备注150字以内" maxLength={150} showWordLimit value={mark}  onChange={(value)=>{
                                        this.setState({
                                            mark:value
                                        })
                                    }}/>
                                </Cell>
                            </div>
                            <div className='box'>
                                <Cell title='支付方式' />
                                <div className='pay'>
                                    {
                                        payList.map((item,index)=>{
                                            return (
                                                <div key={index} className={this.state.activeIndex===index?'paytype active':'paytype'} onClick={()=>{
                                                    this.setState({
                                                        activeIndex:index
                                                    })
                                                }}>
                                                    <div>
                                                    {item.name==='支付宝' && <Alipay color='red' fontSize={20} style={{
                                                        verticalAlign:"middle"
                                                    }}/>}
                                                    {item.name==='微信' && <WechatPay color='red' fontSize={20} style={{
                                                        verticalAlign:"middle"
                                                    }}/>}
                                                    &nbsp; &nbsp;
                                                     {item.name}支付</div>
                                                    <div className='type'>   
                                                        {item.name}快捷支付
                                                    </div>
                                                </div>
                                            )
                                        })
                                    }
                                </div>
                            </div>
                            <div className='box'>
                                <Cell title='商品总价' value={info.payFee}/>
                            </div>
                            <div>
                                <SubmitBar price={info.proTotalFee*100} buttonText="立即结算" onSubmit={()=>this.payMent()}/>
                            </div>
                        </React.Fragment>
                    )
                }
                {
                    !info && <MyLoading></MyLoading>
                }
                <div dangerouslySetInnerHTML={{
                    __html:payHtml
                }}>

                </div>
            </div>
        )
    }
    async componentDidMount() {
        // 获取订单号
        let id = this.props.router.loaction.state.id;
        let res = await getOrderInfo(id);
        
        if(res.data.code!==200){
            Toast.info(res.data.message)
            this.props.router.navigate(-1)
            return
        }
        this.setState({
            info:res.data.data.orderInfoVo,
            preOrderNo:id
        })
    }
    // 支付结算
    async payMent(){
        let {info,mark,payList,activeIndex,preOrderNo} = this.state;
        //创建支付订单
        let data = {
            addressId:info.addressId,
            couponId:0,
            mark:mark,
            payChannel:"weixinh5",
            payType:payList[activeIndex].type,
            phone:info.phone,
            preOrderNo:preOrderNo,
            realName:info.realName,
            shippingType:1,
            storeId:0,
            useIntegral:false
        }
        let res = await createOrder(data);
        console.log(res)
        if(res.data.code===200){
            // 获取支付订单号
            let orderNo = res.data.data.orderNo;
            this.payNewOrder(orderNo)
        }else{
            Toast.fail(res.data.message)
        }
    }
    // 支付订单
  async  payNewOrder(orderNo){
        let {payList,activeIndex} = this.state
        let data = {
            orderNo,
            payChannel:"weixinh5",
            payType:payList[activeIndex].type,
            scene:0
        }
        // 调用后台接口支付订单
        let res = await payOrder(data);
        console.log(res)
        if(payList[activeIndex].type==='alipay'){
            // 若为支付宝支付则后端会返回给前端支付表单，前端需要将该表单放到页面中并提交
            this.setState({
                payHtml:res.data.data.alipayRequest
            },()=>{
                // 提交表单跳转到支付宝
                document.forms[0].submit();
            })
        }else{
            Toast.info(res.data.message)
            // 若为微信支付则后端会返回给前端一个微信的支付链接地址前端只需要window.loaction.href调转到该地址拉起微信支付
        }
    }
}
export default WithRouter(ComfirmOrder);